<template>
  <header class="header">
    <div class="container">
      <!-- Logo和名称 -->
      <router-link to="/" class="logo">
        <img src="@/assets/images/logo.webp" alt="Logo" class="logo-img" />
        <span class="logo-text">My Blog</span>
      </router-link>

      <!-- 导航菜单 -->
      <nav class="nav">
        <router-link to="/" class="nav-item">
          <i class="fas fa-home" style="color: #4CAF50; margin-right: 8px;"></i>
          首页
        </router-link>
        <router-link to="/write" class="nav-item">
          <i class="fas fa-pen" style="color: #2196F3; margin-right: 8px;"></i>
          写文章
        </router-link>
        <router-link to="/message" class="nav-item">
          <i class="fas fa-book" style="color: #FF9800; margin-right: 8px;"></i>
          留言板
        </router-link>
        
        <!-- 搜索框 -->
        <SearchBar class="search-container" />
        
        <router-link to="/about" class="nav-item">
          <i class="fas fa-info-circle" style="color: #9C27B0; margin-right: 8px;"></i>
          关于
        </router-link>
      </nav>

      <!-- 用户区域 -->
      <div class="user-area">
        <button class="auth-button" @click="showAuthModal">
          <img :src="userStore.avatarUrl" class="user-avatar">
        </button>
      </div>
    </div>

    <!-- 认证模态框 -->
    <AuthModal 
      v-if="userStore.showAuthModal"
      :mode="authMode"
      @close="closeAuthModal"
      @switch-mode="(mode) => authMode = mode"
    />
  </header>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
import { ref, watch } from 'vue';
import SearchBar from '@/components/common/SearchBar.vue';
import AuthModal from '@/components/ui/AuthModal.vue';

const userStore = useUserStore()
const authMode = ref('login');

// 监听showAuthModal变化
watch(() => userStore.showAuthModal, (newVal) => {
    if (newVal) {
        authMode.value = 'login'
    }
})

const showAuthModal = () => {
    userStore.showAuthModal = true
}

const closeAuthModal = () => {
    userStore.showAuthModal = false
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(var(--surface-rgb), 0.65);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border-bottom: 1px solid rgba(var(--border-color-rgb), 0.08);
  transition: all 0.3s ease;
  transform: translateY(0);
}

.header.scrolled {
  background: rgba(var(--surface-rgb), 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: 40px;
  color: var(--text-primary);
  
  &:hover {
    opacity: 0.9;
  }
}

.logo-img {
  height: 32px;
  width: 32px;
  margin-right: 10px;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
}

.nav {
  display: grid;
  grid-template-areas: "home write guestbook . search about user";
  grid-template-columns: 150px 150px 150px 1fr 400px auto auto;
  align-items: center;
  gap: 15px;
}

.nav-item[to="/"] {
  grid-area: home;
}
.nav-item[to="/write"] {
  grid-area: write;
}
.nav-item[to="/guestbook"] {
  grid-area: guestbook;
}
.search-container {
  grid-area: search;
}
.nav-item[to="/about"] {
  grid-area: about;
}
.user-area {
  grid-area: user;
}

.nav-item {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  position: relative;
  white-space: nowrap;

  &:hover,
  &.active {
    color: $primary;
    background: rgba($primary, 0.1);
  }
}

.search-container {
  margin-left: auto;
  margin-right: 25px;
  width: 200px;
}

.user-area {
  display: flex;
  align-items: center;
}

.auth-button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.2rem;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  
  &:hover {
    color: $primary;
    background: rgba($primary, 0.1);
  }
}

/* 响应式设计 */
@media (max-width: 992px) {
  .search-container {
    width: 150px;
  }
  
  .nav {
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .logo-text {
    display: none;
  }
  
  .search-container {
    display: none;
  }
  
  .nav-item {
    padding: 8px;
    font-size: 0.9rem;
  }
}

@media (max-width: 576px) {
  .container {
    padding: 0 10px;
  }
  
  .nav-item {
    font-size: 0.8rem;
    padding: 6px;
  }
  
  .logo-img {
    height: 24px;
    width: 24px;
  }
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid var(--border-color);
  transition: all 0.3s ease;
  
  &:hover {
    transform: scale(1.1);
  }
}
</style>